<script setup>
import { ref, watch } from 'vue'

/*
watch:
   作用：侦听某个值的change事件
   vue2
       data   xxx
      watch:{
         xxx:{
          handler(newVal,oldVal){
            newVal:当前值
            oldVal:修改前的值
          },
          deep:默认是false,true:开启深度侦听
          immediate:是否立马(定义)执行handler,默认是false
         }
      }
   vue3:
       作用：侦听某个值/多个值的change事件
       改进：1：侦听多个值 2:可以停止侦听 3：多了一个配制项flush:pre post sync
       使用：
         1：导入 import {watch} from 'vue'
         2:在setup中定义
           const 方法名=watch(需要侦听的数据/[],(newVal,oldVal)=>{},{
             deep:默认是false,true:开启深度侦听
             immediate:是否立马(定义)执行handler,默认是false 
             flush:pre post sync
                  flush控制回调函数执行时机的
                    pre:默认值，默认是在数据渲染前执行  
                    post：默认是在数据渲染后执行 
                    sync：修改一次执行一次渲染(渲染前)
           })
           方法名:停止watch方法    
           
           注意点：侦听某个复杂数据类型的小属性时，写法有变化 
              const stop= watch(()=>属性的值,......后面的无区别)


    watch
      作用：侦听某个值的change事件
      vue2
      内部的配制:
         deep,immediate
      vue3:
         有了一个停止方法
         用法有较大区别：通过导入一个watch函数，传入要侦听的数据进入使用
         特点：可以侦听多个数据，侦听过程中有一个小注意点：对象某个属性(()=>属性的值)
               配制上：多了一个flush: 
                                  pre:默认是在渲染前执行回调函数
                                  post:渲染后执行回调函数
                                  sync:修改一次执行一次回调（渲染前）
           
        




*/
const num = ref(0)
const setNum = () => {
  num.value++
  num.value++
}
const isShow = ref(false)
// 需求：大于10就弹一个alert框
// const stop = watch(
//   num,
//   newVal => {
//     if (newVal > 10) {
//       alert('大于10了')
//     }
//     console.log('当前值', newVal)
//   },
//   {
//     immediate: true
//   }
// )
// 侦听多个数据
// const stop = watch([num, isShow], newVal => {
//   console.log(newVal)
// })

// 侦听复杂数据类型
const userInfo = ref({
  username: '张三',
  age: 18
})
const setUserInfo = () => {
  userInfo.value.age++
}
// const stop = watch(
//   userInfo,
//   newVal => {
//     console.log(newVal)
//   },
//   {
//     deep: true
//   }
// )
// 侦听复杂数据的某个属性时使用()=>属性值
// const stop = watch(
//   () => userInfo.value.age,
//   newVal => {
//     console.log('newVal', newVal)
//   }
// )
// flush配制
const stop = watch(
  num,
  newVal => {
    console.log('当前值', newVal)
    console.log('num渲染前的值:', document.getElementById('xxx').innerText)
  },
  {
    flush: 'sync'
  }
)
</script>

<template>
  <div class="page" id="xxx">{{ num }}</div>
  <button @click="setNum">修改num</button>
  <!-- <button @click="stop">停止侦听</button> -->
  <hr />
  <h3 v-if="isShow">我是黑马学生</h3>
  <button @click="isShow = !isShow">控制是否显示</button>
  <hr />
  <h2>{{ userInfo }}</h2>
  <button @click="setUserInfo">修改userInfo数据</button>
</template>

<style lang="scss" scoped></style>
